<template>
    <div style="width: 100%;height: 276px;" ref="trendChartRef"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
echarts.use([CanvasRenderer, GridComponent, BarChart, TooltipComponent]);

const trendChartRef = ref(null);
let trendChart: any = null;
const initEchart = () => {
    const trendChart = echarts.init(trendChartRef.value);
    const trendOption = {
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['10月', '11月', '12月', '01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月']
        },
        yAxis: { 
            type: 'value',
        },
        series: [{
            type: 'bar',
            data: [23, 707, 609, 224, 877, 842, 75, 861, 914, 807, 354, 334],
            itemStyle: {
                // 设置柱状图的颜色
                color: '#4C7FFE'
            },
            barWidth: '24px' 
        }]
    };
    trendChart.setOption(trendOption);
}
onMounted(() => {
    initEchart();
    window.addEventListener('resize', () => {
        trendChart && trendChart.resize()
    })
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        trendChart && trendChart.resize()
    })
})
</script>
<style lang="less" scoped>

</style>